<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import FuiButton from '@/components/firstui/fui-button/fui-button.vue'
import { useI18n } from 'vue-i18n'

const emit = defineEmits(['update:show'])
// const show = ref(true)
const props = defineProps(['show'])
const UserStore = useUserStore()
const { t } = useI18n()

const closePopup = () => {
  emit('update:show', false)
}

const codeValue = ref('')

const createCode = (val: string) => {
  codeValue.value = val
  draw()
}

const isReady = ref(false)
const readyFn = () => {
  isReady.value = true
}

const generator = ref()

const basicData = computed(() => {
  return {
    blocks: [
      {
        //绘制海报背景
        x: 69,
        y: 0,
        width: 612,
        height: 824,
        backgroundColor: '#fff'
      },
      {
        x: 176,
        y: 180,
        width: 398,
        height: 396,
        backgroundColor: '#fff',
        shadow: {
          blur: 20,
          color: 'rgba(67, 109, 193, 0.17)'
        },
        borderRadius: 40,
        zIndex: 1
      }
    ],
    imgs: [
      {
        imgResource: '/static/image/codebg.png',
        x: 69,
        y: 0,
        width: 612,
        height: 240,
        type: 1,
        crop: true
      }
    ],

    qrcode: [
      {
        width: 339,
        height: 339,
        x: 206,
        y: 210,
        value: `https://page.king-of-panda.com/transfer?type=serviceProvider&id=${codeValue.value}`,
        zIndex: 3
      }
    ],
    texts: [
      {
        text: t('common.pandaFurniture'),
        x: 109,
        y: 70,
        fontSize: 30,
        color: '#203a6d',
        zIndex: 3,
        fontWeight: 'bold'
      },
      {
        text: t('serviceProvider.ScanCodeBindingServiceProvider'),
        x: 109,
        y: 116,
        fontSize: 24,
        color: '#203a6d',
        zIndex: 3
      },
      {
        text: t('serviceProvider.InvitationCode') + ': ' + codeValue.value,
        x: 375,
        y: 620,
        baseLine: 'middle',
        fontSize: 26,
        color: '#181818',
        width: 398,
        height: 50,
        zIndex: 3,
        fontWeight: 'bold',
        textAlign: 'center'
      },
      {
        text: '①  ' + t('serviceProvider.SaveImageToGallery'),
        x: 109,
        y: 675,
        fontSize: 24,
        color: '#848484',
        width: 496,
        zIndex: 3
      },
      {
        text: '②',
        x: 109,
        y: 720,
        fontSize: 24,
        color: '#848484',
        width: 496,
        zIndex: 3,
        rows: 2
      },
      {
        text: t('serviceProvider.openPanda'),
        x: 140,
        y: 720,
        fontSize: 24,
        color: '#848484',
        width: 440,
        zIndex: 3,
        rows: 2,
        lineHeight: 30
      }
    ]

    //绘制线条数据
  }
})

const draw = () => {
  console.log(basicData.value)
  if (isReady.value) {
    uni.showLoading()

    generator.value.generatePoster(basicData.value, (res: any) => {
      uni.previewImage({
        urls: [res]
      })
      uni.hideLoading()
    })
  }
}
defineExpose({
  createCode
})
</script>

<template>
  <fui-poster pixelRatio="1" ref="generator" @ready="readyFn"></fui-poster>
</template>

<style scoped lang="scss"></style>
